<template>
  <div id="details">
    <detail-item class="detail-items"></detail-item>
    <scroll class="content">
    <swiper-detail :topImages="topImages"></swiper-detail>
    <detail-base :goods="goods"></detail-base>
    <detail-shop-info :shop="shop"></detail-shop-info>
    <detail-image-infor></detail-image-infor>
    </scroll>
  </div>
</template>

<script>
import DetailItem from '../comment/DetailItem.vue'
import Scroll from '../comment/Scroll.vue'

import SwiperDetail from '../alls/SwiperDetail.vue'
import DetailBase from '../alls/DetailBase.vue'
import DetailShopInfo from '../alls/DetailShopInfo.vue'
import DetailImageInfor from '../alls/DetailImageInfor.vue'

import {getDetail, Goods, Shop} from '../NetWork/detail'
export default {
  name: 'Detail',
  components: {
    DetailItem,
    SwiperDetail,
    DetailBase,
    DetailShopInfo,
    DetailImageInfor,
    Scroll
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {}
    }
  },
  created() {
    //保存传入的id
    this.iid = this.$route.params.iid
    //根据iid获取详情数据
    getDetail(this.iid).then(res => {
      //获取轮播图数据
      const data = res.result
      this.topImages = res.result.itemInfo.topImages
      //获取商品信息
      this.goods = new Goods (data.itemInfo, data.columns, data.shopInfo.services)
      //获取店铺信息对象
      this.shop = new Shop(data.shopInfo)
      //取出详情信息
      this.detailInfo = data.detailInfo
    })
  },
  methods: {

  }
}
</script>

<style scoped>
#details {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}
.content {
  height: calc(100% - 44px);
}
.detail-items {
  position: relative;
  z-index: 9;
}
</style>
